<template>
  <div>
    <group>
      <cell :title="title" @click.native="selectPerson" class="text-one-l">
        <span slot="value" class="select-names">
          <span  class="text-one-l">{{selectedDepartmentNames?selectedDepartmentNames:"请选择"}}</span>
          <i class="vux-input-icon-left"></i>
        </span>
      </cell>
    </group>
  </div>
</template>
<script>
import { Group, Cell} from "vux"
import { mapActions } from "vuex"
export default {
  components:{Group, Cell},
  props:{
    title:{
      type:String,
      default:()=>"选择部门"
    },
    departments:{
      type:Array,
      default:()=>[]
    },
    selectDepartmentNames:{
      type:String,
      default:()=>""
    },
  },
  data(){
    return{
      selectedDepartmentIds:[],
      selectedDepartmentList:[],
      selectedDepartmentNames:"",
    }
  },
  mounted(){
    if(this.departments.length>0){
      this.selectedDepartmentIds = this.departments
    }
    if(this.selectedDepartmentNames){
      this.selectedDepartmentNames = this.selectedDepartmentNames
    }
    this.getSign()
  },
  methods:{
    ...mapActions('user', ["setSignInfo"]),
    getSign(){
      console.log(51,location)
      // let url = location.origin + location.pathname
      let url = location.href
      this.glRequest.jsSign(url).then(res => {
        if(res.code == "0000"){
          let _signData = JSON.parse(JSON.stringify(res.data))
          setTimeout(()=>{
            this.setSignInfo(_signData)
            wx.config({
              beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模÷式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: _signData.appId, // 必填，企业微信的corpID
              // corpid:_signData.appId, // 必填，企业微信的corpID
              // agentid:'1000051',// 必填，企业微信的应用id
              timestamp: _signData.timestamp, // 必填，生成签名的时间戳
              nonceStr: _signData.nonceStr, // 必填，生成签名的随机串
              signature: _signData.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ["selectEnterpriseContact"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function(){

              try {
                    wx.onHistoryBack(function () {
                        return historyreturn();
                    })
                  } catch (e) { 
                    console.log(600,e)
                  }
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });
            wx.error(function(res){
              console.log(600,res)
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
          _signData = null
          },200)
        }
      })
    },
    selectPerson(){
      var that = this
      setTimeout(()=>{
        wx.invoke("selectEnterpriseContact", {
          "fromDepartmentId": -1,// 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始
          "mode": "single",// 必填，选择模式，single表示单选，multi表示多选
          "type": ["department"],// 必填，选择限制类型，指定department、user中的一个或者多个
          "selectedDepartmentIds": that.selectedDepartmentIds,// 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id
          "selectedUserIds": []// 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id
          },function(res){
              if (res.err_msg == "selectEnterpriseContact:ok"){
                if(typeof res.result == 'string'){
                    res.result = JSON.parse(res.result)
                }
                that.selectedDepartmentList = res.result.departmentList //已选的部门列表
                that.getSelectedDepartmentIds()
                that.invokeEmit()
              }
          }
        );
      },200)
    },
    getSelectedDepartmentIds(){
      let selectedDepartmentIds = []
      let departmentNames = []
      for(let i = 0;i < this.selectedDepartmentList.length; i++){
        let user = this.selectedDepartmentList[i]
        selectedDepartmentIds.push(user.id); // 已选的单个部门ID
        departmentNames.push(user.name)
      }
      this.selectedDepartmentIds = selectedDepartmentIds.toString()
      this.selectedDepartmentNames = departmentNames.toString()
    },
    invokeEmit(){
      var that = this
      that.$emit("getDepartmentList",that.selectedDepartmentList)
    }
  }
}
</script>

<style lang="less" scoped>
.vux-input-icon-left{
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    right: 2px;
}
.select-names{
  padding-right:15px;
  position:relative
}
/deep/.weui-cell {
  .weui-cell__ft{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

</style>